import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {Row, Col, Button, Table, message} from 'antd';
import {List} from 'immutable';
import {orderQL} from '../ql';
import {columns} from '../constant/columns';
import noop from 'util/noop';
import ReceiptButton from '../../receipt-common/receipt-button';
import {routerShape} from 'constant/PropTypes';
import {createLocationDescriptor} from 'util/history';

@Relax
export default class Order extends Component {
    static defaultProps = {
        order: orderQL,

        receipt: noop,
        setOrderStatus: noop,
        completeOrder: noop
    }

    //路由跳转
    static contextTypes = {
        router: routerShape
    }


    constructor(props) {
        super(props);

        this.state = {
            visible: false,
            loading: false
        }
    }


    render() {
        const {order} = this.props;
        const {visible, loading} = this.state;

        return (
            <div className="order-detail">
                <div className="order-info">
                    <Row>
                        <Col span={18}>
                            <div className="font-14">
                                <b>订单编号：</b>
                                <span>{order.get('tid')}</span>
                            </div>
                        </Col>
                        <Col span={6}>
                            {
                                order.get('orderStatus') === 'WAIT_RECEIVE'
                                    ?
                                    <div className="t-right">
                                        <ReceiptButton visible={visible}
                                                       loading={loading}
                                                       onConfirm={this.onConfirm}
                                                       onCancel={this.onCancel}
                                                       changeVisible={this.changeVisible}/>
                                    </div>
                                    :
                                    null

                            }
                        </Col>
                    </Row>
                </div>

                <div className="buy-list">
                    <Table bordered
                           dataSource={(order.get('itemOrders') || List()).toJS()}
                           columns={columns}
                           pagination={false}/>
                </div>

                <Row className="order-pay-detail">
                    <Col span={10} />
                    <Col span={7} offset={7}>
                        <Row className="pushb font-16">
                            <Col span={12}>收款金额（元）：</Col>
                            <Col span={12}><div className="t-right t-price">&yen;{(order.get('totalTradeCash') || 0).toFixed(2)}</div></Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }


    /**
     * 收款
     * @param tid
     */
    onConfirm = ()=>{
        const {receipt, order, setOrderStatus, completeOrder} = this.props;
        this.setState({loading: true});

        receipt(order.get('tid')).then(()=>{
            setTimeout(()=>{
                message.success("收款成功");
                setOrderStatus("SUCCESS");
                completeOrder(order.get('tid')).then().catch(()=>{
                    setTimeout(()=>{
                        completeOrder(order.get('tid'));
                    }, 1000)
                });
                this.setState({
                    loading: false,
                    visible: false
                });
                this.goToPage('/order/receipt');
            }, 2000);
        }).catch((err)=>{
            this.setState({loading: false});
            message.error(err.message);
        });
    }


    onCancel = ()=>{
        const {loading} = this.state;
        !loading && this.setState({visible: false})
    }


    changeVisible = ()=>{
        this.setState({visible: true})
    }

    goToPage = (path)=>{
        this.context.router.replace(createLocationDescriptor(path));
    }
}